<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建供应商</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .modal-dialog {
            max-width: 800px;
        }
        .form-group label {
            font-weight: 500;
        }
        .required::after {
            content: "*";
            color: red;
            margin-left: 4px;
        }
        .btn-primary {
            background-color: #00796b;
            border-color: #00796b;
        }
        .btn-primary:hover {
            background-color: #00695c;
            border-color: #00695c;
        }
        .btn-secondary {
            background-color: #f5f5f5;
            border-color: #e0e0e0;
            color: #333;
        }
        .btn-secondary:hover {
            background-color: #e0e0e0;
            border-color: #d0d0d0;
            color: #333;
        }
        .form-control:focus {
            border-color: #80cbc4;
            box-shadow: 0 0 0 0.2rem rgba(0, 121, 107, 0.25);
        }
    </style>
</head>
<body>
    <div class="container-fluid p-4">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">新建供应商</h5>
            </div>
            <div class="card-body">
                <form id="supplierForm">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="projectName" class="col-sm-3 col-form-label text-right">项目名称：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="projectName">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button">
                                                <i class="fa fa-times"></i>
                                            </button>
                                            <button class="btn btn-outline-secondary" type="button">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="projectNumber" class="col-sm-3 col-form-label text-right">项目编号：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="projectNumber" value="202308210050" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="buildUnit" class="col-sm-3 col-form-label text-right">建设单位：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="buildUnit" value="宿迁市中医院南院区">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="department" class="col-sm-3 col-form-label text-right">所属部门：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="department" value="宿迁市中医院南院区">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="contactPerson" class="col-sm-3 col-form-label text-right">联系人：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="contactPerson" value="李兰兰">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="contactPhone" class="col-sm-3 col-form-label text-right">联系电话：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="contactPhone" value="13683544763">
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="supplier" class="col-sm-3 col-form-label text-right required">供应商：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="supplier" placeholder="请输入基础单位">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="supplierContact" class="col-sm-3 col-form-label text-right">联系人：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="supplierContact" placeholder="请输入联系人">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="supplierPhone" class="col-sm-3 col-form-label text-right">联系电话：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="supplierPhone" placeholder="请输入联系电话">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="supplierEmail" class="col-sm-3 col-form-label text-right">电子邮件：</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" id="supplierEmail" placeholder="请输入电子邮件">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mt-5">
                        <button type="submit" class="btn btn-primary px-5 mr-2">
                            <i class="fa fa-save mr-2"></i>保存
                        </button>
                        <button type="button" class="btn btn-secondary px-5" id="cancelBtn">
                            <i class="fa fa-times mr-2"></i>取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 表单提交处理
            $("#supplierForm").on("submit", function(e) {
                e.preventDefault();
                
                // 验证必填字段
                if (!$("#supplier").val().trim()) {
                    alert("请输入供应商名称");
                    $("#supplier").focus();
                    return;
                }
                
                // 提交表单逻辑
                alert("供应商信息已保存");
                
                // 返回上一页
                window.location.href = "../supplier-management.html";
            });
            
            // 取消按钮点击事件
            $("#cancelBtn").click(function() {
                window.location.href = "../supplier-management.html";
            });
        });
    </script>
</body>
</html>
